import React, { useState } from 'react';

const UseStateDemo: React.FC = () => {
  // 基本用法
  const [count, setCount] = useState<number>(0);
  
  // 对象状态
  const [user, setUser] = useState({
    name: '张三',
    age: 25,
    email: 'zhangsan@example.com'
  });
  
  // 数组状态
  const [todos, setTodos] = useState<string[]>(['学习React', '学习Hooks']);
  
  // 新待办事项输入
  const [newTodo, setNewTodo] = useState<string>('');

  // 处理用户信息的更新
  const updateUser = (field: keyof typeof user, value: string | number) => {
    setUser(prevUser => ({
      ...prevUser,
      [field]: value
    }));
  };

  // 添加待办事项
  const addTodo = () => {
    if (newTodo.trim()) {
      setTodos(prevTodos => [...prevTodos, newTodo.trim()]);
      setNewTodo('');
    }
  };

  // 删除待办事项
  const removeTodo = (index: number) => {
    setTodos(prevTodos => prevTodos.filter((_, i) => i !== index));
  };

  return (
    <div className="demo-page">
      <h1>useState Hook 演示</h1>
      <p className="description">
        useState是React中最基础的Hook，用于在函数组件中添加状态。
      </p>

      {/* 计数器示例 */}
      <section className="demo-section">
        <h2>1. 基础计数器</h2>
        <div className="counter-demo">
          <p>当前计数: {count}</p>
          <div className="button-group">
            <button onClick={() => setCount(count + 1)}>增加</button>
            <button onClick={() => setCount(count - 1)}>减少</button>
            <button onClick={() => setCount(0)}>重置</button>
          </div>
        </div>
      </section>

      {/* 对象状态管理 */}
      <section className="demo-section">
        <h2>2. 对象状态管理</h2>
        <div className="user-form">
          <div className="form-group">
            <label>姓名:</label>
            <input
              type="text"
              value={user.name}
              onChange={(e) => updateUser('name', e.target.value)}
            />
          </div>
          <div className="form-group">
            <label>年龄:</label>
            <input
              type="number"
              value={user.age}
              onChange={(e) => updateUser('age', parseInt(e.target.value) || 0)}
            />
          </div>
          <div className="form-group">
            <label>邮箱:</label>
            <input
              type="email"
              value={user.email}
              onChange={(e) => updateUser('email', e.target.value)}
            />
          </div>
          <div className="user-display">
            <h3>用户信息:</h3>
            <p>姓名: {user.name}</p>
            <p>年龄: {user.age}</p>
            <p>邮箱: {user.email}</p>
          </div>
        </div>
      </section>

      {/* 数组状态管理 */}
      <section className="demo-section">
        <h2>3. 数组状态管理（待办事项）</h2>
        <div className="todo-demo">
          <div className="todo-input">
            <input
              type="text"
              value={newTodo}
              onChange={(e) => setNewTodo(e.target.value)}
              onKeyPress={(e) => e.key === 'Enter' && addTodo()}
              placeholder="添加新的待办事项..."
            />
            <button onClick={addTodo}>添加</button>
          </div>
          
          <ul className="todo-list">
            {todos.map((todo, index) => (
              <li key={index} className="todo-item">
                <span>{todo}</span>
                <button 
                  className="remove-btn"
                  onClick={() => removeTodo(index)}
                >
                  删除
                </button>
              </li>
            ))}
          </ul>
          
          {todos.length === 0 && (
            <p className="empty-message">暂无待办事项</p>
          )}
        </div>
      </section>

      {/* 代码示例 */}
      <section className="demo-section">
        <h2>4. 使用要点</h2>
        <div className="code-example">
          <h3>基本语法:</h3>
          <pre>
{`const [state, setState] = useState(initialState);

// 更新状态
setState(newState);

// 基于前一个状态更新
setState(prevState => prevState + 1);

// 对象状态更新（需要展开运算符）
setState(prevState => ({
  ...prevState,
  key: newValue
}));`}
          </pre>
        </div>
      </section>
    </div>
  );
};

export default UseStateDemo;